<template>
  <div class="customer-basic-rule">
    <el-scrollbar class="left" @scroll="onScroll">
      <el-form ref="formRef" :model="form" label-position="top">
        <el-form-item label="客户查重规则" class="info-alert" id="repeatRule">
          <el-checkbox-group v-model="form.customerRepeatRules">
            <el-checkbox label="name">客户姓名</el-checkbox>
            <el-checkbox label="mobile">手机号码</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="来电自动保存" class="info-alert auto-save" id="autoSave">
          <el-checkbox v-model="form.autoSave" @change="handleAutoSave"
            >来电自动保存客户
            <span class="tip"
              >(当来电话后，自动校验该电话是否已存在系统，如果不存在，则自动保存该号码为一个客户)</span
            ></el-checkbox
          >
          <el-checkbox v-show="form.autoSave" v-model="form.autoAssign" style="display: block"
            >保存客户并分配给接电话人</el-checkbox
          >
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <div class="right">
      <Nav :headers="navArr" @onScrollNav="scrollNav" :toId="toId" />
    </div>
    <div class="btns">
      <el-button type="primary" @click="saveRulesFun">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import Nav from '@/common/components/right-nav/index.vue'
import { saveRules, getRules } from '@/app/customer/apis/rule'
import { ElMessage } from 'element-plus'
interface State {
  navArr: Record<string, unknown>[]
  form: any
  toId: string
}
export default defineComponent({
  name: 'CustomerBasicRule',
  components: { Nav },
  setup() {
    const state: State = reactive({
      navArr: [
        { name: '客户查重规则', id: 'repeatRule' },
        { name: '来电自动保存', id: 'autoSave' }
      ],
      toId: 'repeatRule',
      form: {
        customerRepeatRules: ['mobile'],
        autoSave: false,
        autoAssign: false
      }
    })

    const handleAutoSave = (val: boolean) => {
      // 取消自动保存同时取消自动分配
      if (!val && state.form.autoAssign) {
        state.form.autoAssign = false
      }
    }

    const saveRulesFun = () => {
      if (!state.form.customerRepeatRules.length) {
        return ElMessage.error('请选择客户查重规则')
      }
      saveRules(state.form).then((res) => {
        if (res.success) {
          ElMessage.success('操作成功')
        }
      })
    }

    const getRulesFun = () => {
      getRules().then((res) => {
        if (res.success) {
          state.form = res.data || {}
        }
      })
    }

    onMounted(() => {
      getRulesFun()
    })

    const scrollNav = (link: string) => {
      if ((document as any).getElementById(link)) {
        ;(document as any).getElementById(link).scrollIntoView({ behavior: 'smooth' })
      }
    }

    // 滚动事件，对应右侧更改
    const onScroll = (obj: any) => {
      const arrayOfDocFonts = document.getElementsByClassName('info-alert')
      for (var i = 0; i < arrayOfDocFonts.length; i++) {
        if (arrayOfDocFonts[i].id != '') {
          const offsetHight = (document as any).getElementById(`${arrayOfDocFonts[i].id}`).offsetTop
          if (obj.scrollTop >= offsetHight) {
            state.toId = arrayOfDocFonts[i].id
          }
        }
      }
    }

    return {
      ...toRefs(state),
      saveRulesFun,
      scrollNav,
      onScroll,
      handleAutoSave
    }
  }
})
</script>

<style lang="stylus">
.customer-basic-rule
    height 100%
    padding 24px
    box-sizing border-box
    position relative
    display flex
    .auto-save
      .el-form-item__content
        display: block
    .right
      width 15%
      position absolute
      right 0
    .box
        right 70px
        top 20px
    .tip
      margin-left 10px
      color rgba(0, 0, 0, 0.38)
    .rule
      .el-form-item__content
        display block
    .btns
      width calc(100% - 48px)
      position absolute
      bottom 0
      height 64px
      padding 14px 24px
      box-sizing border-box
      box-shadow 0px -1px 0px rgba(0, 0, 0, 0.05)
      text-align right
      background #fff
      z-index 1
</style>
